<template>
    <el-card shadow="never">
        <div slot="header">
            <span>排序</span>
            <div style="float: right;">
                <el-button size="mini" type="primary" @click="random">随机排序</el-button>
            </div>
        </div>
        <div>
            顺序：{{schema.order}}
        </div>
        <DynamicForm :schema="schema"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './code.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    name: {
                        label: 'name',
                        widget: 'input',
                        ui: {
                            clearable: true,
                            placeholder: '请输入'
                        }
                    },
                    like: {
                        label: 'like',
                        widget: 'input',
                        ui: {
                            disabled: true,
                            placeholder: '请输入'
                        }
                    },
                    password: {
                        label: 'password',
                        widget: 'input',
                        ui: {
                            type: 'password',
                            showPassword: true,
                            placeholder: '请输入'
                        }
                    },
                    phone: {
                        label: 'phone',
                        widget: 'input',
                        ui: {
                            readonly: true,
                            placeholder: '请输入'
                        }
                    },
                    resume: {
                        label: 'resume',
                        widget: 'input',
                        ui: {
                            type: 'textarea',
                            maxlength: 30,
                            showWordLimit: true,
                            autosize: { minRows: 2, maxRows: 6 },
                            placeholder: '请输入'
                        }
                    }
                },
                order: [],
                ui: {
                    labelWidth: 'auto'
                }
            }
        }
    },
    methods: {
        random() {
            let keys = Object.keys(this.schema.properties)
            let t;
            for(let i = 0;i < keys.length; i++){
                let rand = parseInt(Math.random() * keys.length);
                t = keys[rand];
                keys[rand] =keys[i];
                keys[i] = t;
            }
            this.schema.order = keys
        }
    }
}
</script>

<style>

</style>